<template>
  <el-aside>
    <div class="menu" :style="{ width: appStore.collapsed ? '65px' : '220px', height: '100%' }">
      <div class="logo flex-center">
        <img src="@/assets/images/logo.png" alt="logo" />
        <span v-show="!appStore.collapsed">{{ FullName }}</span>
      </div>
      <el-scrollbar>
        <el-menu :default-active="defaultMenu" :collapse="appStore.collapsed" class="app-siderbar-menu" active-text-color="#ffd04b" text-color="#fff" background-color="#191a20" @open="handleOpen" @close="handleClose" router>
          <el-menu-item index="/dashboard">
            <i class="el-icon"><i-ep-Monitor /></i>
            <span>公告板</span>
          </el-menu-item>
          <el-menu-item index="/article">
            <i class="el-icon"><i-ep-Document /></i>
            <span>文章管理</span>
          </el-menu-item>
          <el-menu-item index="/model">
            <i class="el-icon"><i-ep-Files /></i>
            <span>栏目管理</span>
          </el-menu-item>
          <el-menu-item index="/category">
            <i class="el-icon"><i-ep-Folder /></i>
            <span>分类管理</span>
          </el-menu-item>
          <el-menu-item index="/banner">
            <i class="el-icon"><i-ep-Picture /></i>
            <span>Banner管理</span>
          </el-menu-item>
          <el-menu-item index="/comment">
            <i class="el-icon"><i-ep-Comment /></i>
            <span>评论管理</span>
          </el-menu-item>
          <el-menu-item index="/message">
            <i class="el-icon"><i-ep-Message /></i>
            <span>留言管理</span>
          </el-menu-item>
          <el-menu-item index="/users">
            <i class="el-icon"><i-ep-user /></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/apps">
            <i class="el-icon"><i-ep-Orange /></i>
            <span>应用管理</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <i class="el-icon"><i-ep-Postcard /></i>
            <span>关于我</span>
          </el-menu-item>
          <el-menu-item index="/link">
            <i class="el-icon"><i-ep-Link /></i>
            <span>友情链接</span>
          </el-menu-item>
          <el-menu-item index="/setting">
            <i class="el-icon"><i-ep-Setting /></i>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </div>
  </el-aside>
</template>
<script setup lang="ts">
import { FullName } from '@/config'
import { useAppStore } from '@/store'
import { useRoute } from 'vue-router'

const route = useRoute()
const appStore = useAppStore()
const defaultMenu = ref('')
const handleOpen = () => {}
const handleClose = () => {}

// 监听路由，设置刷新后的当前高亮状态
watch(
  () => route.path,
  (val: string) => {
    console.log('val', val)
    defaultMenu.value = val
  },
  { immediate: true }
)
</script>
